<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.css">
    <script src="/JS/jquery/jquery-3.3.1.js"></script>
    <script src="/bootstrap/dist/js/bootstrap.js"></script>
    <title>用户列表</title>
</head>
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">
        &times;
    </a>
    <strong>警告！</strong>您的网络连接有问题。
</div>
<div>
    <div class="modal" id="myModal">  <div class="modal-header">    <a class="close" data-dismiss="modal">×</a>    <h3>对话框标题</h3>  </div>  <div class="modal-body">    <p>对话框内容</p>  </div>  <div class="modal-footer">    <a href="#" class="btn">关闭</a>    <a href="#" class="btn btn-primary">保存更新</a>  </div></div>

    <ul class="nav nav-pills">
        <li><a href="#">规则的链接</a></li>
        <li class="dropdown" id="menutest1">    <a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1">      下拉项      <b class="caret"></b>    </a>
            <ul class="dropdown-menu">
                <li><a href="#">动作</a></li>
                <li><a href="#">另一个动作</a></li>
                <li><a href="#">其他</a></li>
                <li class="divider"></li>
                <li><a href="#">被间隔的链接</a></li>
            </ul>
        </li>
        <li class='active'>    <a data-toggle="dropdown" href="#menutest1">点击我看看</a>  </li>
    </ul>

    <p>标签式的导航菜单</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="/demo/list">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>


    <table class="table table-striped table-bordered table-condensed">
        <h2>用户列表</h2>
        <thead>
            <tr align="center">
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr  th:each="user:${users}" align="center" onclick="oncli(this)" onmouseover="onOver(this)" onmouseout="onOut(this)">
                <td th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
                <td th:text="${user.age}"></td>
                <td th:text="${user.address}"></td>
                <td th:switch="${user.male}">
                    <span th:case="1">男</span>
                    <span th:case="0">女</span>
                    <span th:case="*">未知</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>




<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active" >
            <img src="/images/001.jpg" alt="风景">
            <div class="carousel-caption">风景</div>
        </div>
        <div class="item" th:each="item:${items}">
            <img th:src="${item.uri}" th:alt="${item.alt}">
            <div class="carousel-caption" th:text="${item.title}"></div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>









<script type="text/javascript">
    $(function() {
    });


   function oncli(data) {
       if(!data.style.backgroundColor) {
           data.style.backgroundColor="red"
           return;
       }

       if(data.style.backgroundColor == "gray") {
           //data.style.backgroundColor=""
           data.style.backgroundColor="red"
           return;
       }

       if(data.style.backgroundColor == "red") {
           //data.style.backgroundColor=""
           data.style.backgroundColor=""
           return;
       }
   }

   function onOver(data) {
       if(data.style.backgroundColor && data.style.backgroundColor == "red") {
           //data.style.backgroundColor=""
           return;
       }
       data.style.backgroundColor="gray";//更改偶数行的背景颜色
   }

   function onOut(data) {
       if(data.style.backgroundColor && data.style.backgroundColor == "gray") {
           data.style.backgroundColor=""
           return;
       }
   }
</script>
</body>
</html>